/* 表单控件基础样式 */
.form-control {
  display: block;
  width: 100%;
  padding: calc(var(--space-unit) * 1.5);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-color);
  background-clip: padding-box;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  min-height: 48px;
}

.form-control:focus {
  color: var(--text-primary);
  background-color: var(--bg-color);
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(51, 202, 187, 0.25);
}

/* 文本输入框 */
.input-text {
  composes: form-control;
}

/* 密码输入框 */
.input-password {
  composes: form-control;
}

/* 数字输入框 */
.input-number {
  composes: form-control;
}

/* 长文本输入框 */
.textarea {
  composes: form-control;
  min-height: 120px;
  resize: vertical;
}

/* 富文本编辑器容器 */
.rich-text-editor {
  composes: form-control;
  min-height: 200px;
  padding: 0;
  overflow: hidden;
}

/* 开关控件 */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--primary-color);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--primary-color);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* 表单标签 */
.form-label {
  display: inline-block;
  margin-bottom: calc(var(--space-unit) * 0.5);
  font-weight: 500;
}

/* 表单组 */
.form-group {
  margin-bottom: calc(var(--space-unit) * 2);
}

/* 表单验证状态 */
.form-control.is-valid {
  border-color: var(--success-color);
}

.form-control.is-invalid {
  border-color: var(--danger-color);
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: calc(var(--space-unit) * 0.5);
  font-size: 0.875rem;
  color: var(--success-color);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: calc(var(--space-unit) * 0.5);
  font-size: 0.875rem;
  color: var(--danger-color);
}

.is-valid ~ .valid-feedback,
.is-invalid ~ .invalid-feedback {
  display: block;
}